<template>

  <el-drawer v-model="reviewDrawer" size="90%" title="审核商品">
    <el-button type="primary" @click="approveDraft">通过审核</el-button>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="参数详情">
        <admin-review :origin="traffic" :review-obj="trafficDraft"/>
      </el-collapse-item>
      <el-collapse-item title="图文描述">
        <div v-if="trafficDraft.introduceId!==traffic.introduceId" v-html="contentDraft"/>
        <el-tag v-else type="success">图文描述未修改</el-tag>
      </el-collapse-item>
    </el-collapse>
  </el-drawer>

  <el-collapse v-model="activeNames">
    <el-collapse-item v-loading="trafficLoading" title="资源详情" name="1">
      <el-descriptions :column="3" border>
        <el-descriptions-item label="资源编号">{{ traffic.trafficNo }}</el-descriptions-item>
        <el-descriptions-item label="资源名称">{{ traffic.trafficName }}</el-descriptions-item>
        <el-descriptions-item label="出发时间">{{ traffic.startTime }}</el-descriptions-item>
        <el-descriptions-item label="到达时间">{{ traffic.reachTime }}</el-descriptions-item>
        <el-descriptions-item label="出发城市">{{ cityToStr(traffic.startCity) }}</el-descriptions-item>
        <el-descriptions-item label="到达城市">{{ cityToStr(traffic.destCity) }}</el-descriptions-item>
        <el-descriptions-item label="出发地址">{{ traffic.startAddress }}</el-descriptions-item>
        <el-descriptions-item label="到达地址">{{ traffic.destAddress }}</el-descriptions-item>
        <el-descriptions-item label="负责人电话">{{ traffic.phone }}</el-descriptions-item>
        <el-descriptions-item label="预设库存">{{ traffic.defaultStore }}</el-descriptions-item>
        <el-descriptions-item label="预设价格">{{ traffic.defaultPrice }}</el-descriptions-item>
        <el-descriptions-item label="开放天数">{{ traffic.openDay }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ traffic.updateTime }}</el-descriptions-item>
        <el-descriptions-item label="上下架状态" :declare-var="hereSellState=sellState[traffic.sellState]">
          <el-tag :type="hereSellState?.tagType">{{ hereSellState?.str }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="编辑状态" :declare-var="hereEditState=editState[traffic.editState]">
          <el-tag :type="hereEditState?.tagType">{{ hereEditState?.str }}</el-tag>
          <el-button type="primary" size="small" v-if="traffic.editState===1"
                     @click="reviewDrawer=true">审核
          </el-button>
        </el-descriptions-item>
        <el-descriptions-item label="供应商">
          <el-button @click="addNewContact('supplier',traffic.supplierId)" plain type="primary">联系供应商
          </el-button>
        </el-descriptions-item>
        <el-descriptions-item label="管理状态" :declare-var="hereAdminState=adminState[traffic.adminState]">
          <el-tag :type="hereAdminState?.tagType">{{ hereAdminState?.str }}</el-tag>
          <el-select v-model="editAdminState">
            <el-option
                v-for="(value,key) in adminState"
                :key="key"
                :label="value.str"
                :value="key"
            />
          </el-select>
          <el-button type="primary" size="small" :disabled="traffic.adminState==editAdminState"
                     @click="updateAdminState">更新状态
          </el-button>
        </el-descriptions-item>

      </el-descriptions>
    </el-collapse-item>
    <el-collapse-item v-loading="storeLoading" title="库存详情" name="2">
      <el-descriptions border :column="2">
        <el-descriptions-item align="center"
                              width="10px"
                              v-for="item in storeList"
                              :key="item.date"
                              :label="item.date">
          <div>
            库存:{{ item.store }}
          </div>
          <div>
            价格:{{ item.price }}
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-collapse-item>
    <el-collapse-item v-loading="contentLoading" title="详情页" name="3">
      <div v-html="content"></div>
    </el-collapse-item>
  </el-collapse>


</template>
<script>
// https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive
// https://www.zhihu.com/question/500937713
export default {name: 'AdminDetail'}
</script>
<script setup>
import {nextTick, onBeforeMount, onBeforeUnmount, onMounted, provide, ref, shallowRef, watch,} from "vue";
import axios from "~/config/axios.js";
import {useRoute} from "vue-router";
import {dateStrToDate, showSuccessAndReload, cityToStr} from "~/config/utils.js";
import '@wangeditor/editor/dist/css/style.css'
import {addNewContact} from "~/config/utils.js"
import router from "~/config/router.js"
import {editState, adminState, sellState, initObj} from "~/config/const.js";
import AdminReview from "~/components/AdminReviewTraffic.vue";


const activeNames = ['1', '2', '3']

const trafficId = useRoute().params.id
const traffic = ref({})
const copyTraffic = ref({})
const trafficLoading = ref(true)
const editAdminState = ref()

onBeforeMount(async () => {
  traffic.value = await axios.get(`/traffic/${trafficId}`);
  copyTraffic.value = JSON.parse(JSON.stringify(traffic.value));
  editAdminState.value = traffic.value.adminState + ''
  trafficLoading.value = false
});
const updateAdminState = () => {
  axios.post(`/traffic/${traffic.value.trafficId}/${traffic.value.updateTime}/adminEditAdminState`, {
    beforeState: traffic.value.adminState,
    afterState: editAdminState.value
  }).then(res => {
    showSuccessAndReload()
  })
}
// ------------------------------------------------------------------
const reviewDrawer = ref(false)
const draftObj = ref({})
const trafficDraft = ref()
const contentDraft = ref()
watch(traffic, async () => {
  if (traffic.value.editState === 1 || ![0, 1].includes(traffic.value.adminState)) {
    draftObj.value = await axios.get(`/traffic/${trafficId}/draft`);
    trafficDraft.value = draftObj.value.json
    if (trafficDraft.value.introduceId !== traffic.value.introduceId) {
      contentDraft.value = await axios.get(`/introduce/${trafficDraft.value.introduceId}`);
    }
  }
})
const approveDraft = () => {
  axios.post(`/traffic/${trafficId}/adminApproveDraft/${draftObj.value.draftId}/${draftObj.value.updateTime}`)
      .then(res => {
        showSuccessAndReload()
      })
}
// -------------------------------------------------------------
const storeList = ref([])
const storeLoading = ref(true)
watch(traffic, async () => {
  storeList.value = await axios.get(`/store/${traffic.value.productType}/${traffic.value.trafficId}`);
  storeLoading.value = false
})
// --------------------------------------------------------------
const content = ref()
const contentLoading = ref(true)
watch(traffic, async () => {
  content.value = await axios.get(`/introduce/${traffic.value.introduceId}`);
  contentLoading.value = false
})


</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
